<template>
	<el-form-item v-for="field in data.fields" :label="field.label" :key="field.name" :rules="field.rules" :style="{width:field.width ? field.width : ''}">
		<!-- 输入框 -->
		<template v-if="field.type === 'input'">
			<el-input v-model="field.value" :placeholder="field.placeholder"></el-input>
		</template>
	
		<!-- 数字输入框 -->
		<template v-if="field.type === 'inputNumber'">
			<el-input-number v-model="field.value" :placeholder="field.placeholder"></el-input-number>
		</template>
	
		<!-- 选择框 -->
		<template v-if="field.type === 'select'">
			<el-select v-model="field.value" placeholder="请选择" style="min-width: 200px;">
				<el-option v-for="option in field.options" :label="option.label" :value="option.value"
					:key="option.value"></el-option>
			</el-select>
		</template>
		<!-- cascader -->
		<template v-if="field.type === 'cascader'">
			<el-cascader v-model="field.value" :options="field.options" :props="field.props" :placeholder="field.placeholder"></el-cascader>
		</template>
	
	
		<!-- 日期选择器（支持单个时间和时间范围） -->
		<template v-if="field.type === 'datePicker'">
			<el-date-picker 
				v-model="field.value" 
				:placeholder="field.placeholder"
				:type="field.selectableType === 'singleOrRange' ? 'datetimerange' : 'datetime'"
				:picker-options="field.pickerOptions"
				start-placeholder="开始时间"
				end-placeholder="结束时间"
			/>
		</template>
		<!-- 富文本编辑器 -->
		<template v-if="field.type === 'editor'">
			<uw-editor v-model="field.value" :placeholder="field.placeholder" />
		</template>
		
		<!-- 单选框 -->
		<template v-if="field.type === 'radio'">
			<el-radio-group v-model="field.value">
				<el-radio v-for="option in field.options" :label="option.value" :key="option.value">{{ option.label }}</el-radio>
			</el-radio-group>
		</template>
		
		<!--  复选框  -->
		<template v-if="field.type === 'checkbox'">
			<el-checkbox-group v-model="field.value">
				<el-checkbox v-for="option in field.options" :label="option.value" :key="option.value">{{ option.label }}</el-checkbox>
			</el-checkbox-group>
		</template>
		
		<!-- 开关 -->
		<template v-if="field.type === 'switch'">
			<el-switch v-model="field.value" :active-value="field.activeValue" :inactive-value="field.inactiveValue"></el-switch>
		</template>
		
		<!-- 上传组件 -->
		<template v-if="field.type === 'upload'">
			<uw-image
				:src="field.value" 
				:showMack="true" 
				:imageList="[field.value]"
				v-if="field.value"
				@deleteChange="field.value=''" 
			/>
			<div class="uw-update-btn uw-border-white-smoke-all uw-flex-center" @click.stop="showManagerFun(false,field)" v-else >
				<el-icon :size="30" color="#F5F5F5">
					<Plus />
				</el-icon>
			</div>
		</template>
		<template v-if="field.type === 'uploads'">
			<div class="uw-mr-10" v-for="(item,index) in field.value" :key="index">
				<uw-image 
					:src="item"
					:showMack="true"
					:initialindex="index" 
					:imageList="field.value" 
					@deleteChange="()=>{field.value.splice(index,1)}"
				/>
			</div>
			<div class="uw-update-btn uw-border-white-smoke-all uw-flex-center" @click.stop="showManagerFun(true,field)">
				<el-icon :size="30" color="#F5F5F5">
					<Plus />
				</el-icon>
			</div>
		</template>
		<uw-image-manager :isMultiple="isMultiple" v-if="showManager" @change="changeImage($event,fieldData)" />
	</el-form-item>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	const props = defineProps({
		data: {
			default: () => ({}),
			type: Object,
			required: true,
		},
	});
	const showManager = ref(false)
	const isMultiple = ref<boolean>(false)
	const fieldData = ref()
	/**
	 * 展示图片库
	 */
	const showManagerFun = (boole:boolean,field:any) => {
		showManager.value = true
		isMultiple.value = boole
		fieldData.value = field
	}
	const changeImage = (event:any,field:any) => {
		console.log(event);
		console.log(field);
		showManager.value = false
		if(isMultiple.value){
			const list = event.map((val:any)=>val.url)
			field.value.push(...list)
		}else{
			field.value = event[0].url
		}
	}
</script>

<style>
</style>